<template>
	<view class="container flex-center flex-column">
		<view class="title">您正在进行好友{{coinName}}转赠</view>
		<view class="addressBack-box">
			<view class="lable"><span>手机号:</span></view>
			<view class="input-box bor-line-F7F7F7">
				<input type="phone" v-model="phone" @input="applycheck" class="fs28" maxlength="11"
					placeholder-class="consignee" placeholder="手机号" />
			</view>
			<view class="lable">转赠数量:</view>
			<view class="input-box bor-line-F7F7F7">
				<input type="num" v-model="num" @input="applycheck" class="fs28"
					placeholder-class="consignee" placeholder="转赠数量" />
			</view>
			<view class="lable">备注:</view>
			<view class="input-box bor-line-F7F7F7">
				<input type="text" v-model="bak" @input="applycheck" class="fs28"
					placeholder-class="consignee" placeholder="转赠备注" />
			</view>
		</view>
		<view class="apply-box">
			<view class="apply-withdraw" @click="applyTransfer">确认转赠</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed
	} from "vue";
	import {
		request
	} from "@/utils/request";
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const num = ref('')
	const phone = ref('')
	const bak = ref('')
	const coinName = ref('')

	onMounted(() => {
		nextTick(()=>{
			coinName.value = getApp().globalData.coinName
		})
	})
	const transfer = async () => {
		try {
			const res = await request(API.coinTransfer, transfeReq.value, 'POST')
			if (res.code = '200')
				exchangeRate.value = res.data
			else uni.showToast({
				title: res.errorData,
				duration: 200
			})
		} catch (err) {
			console.log(err.message)
		}
	}

	const applycheck = async (e) => {
		// credit.value = parseInt(num.value ? num.value : '0') * exchangeRate.value
	}

	const applyTransfer = async () => {
		if (num.value < '1') {
			uni.showToast({
				title: "转赠数量不能为空",
				duration: 2000,
				icon: 'none'
			})
			return
		} else if (phone.value === '') {
			uni.showToast({
				title: "请输入好友手机号",
				duration: 2000,
				icon: 'none'
			})
			return
		} else {
			const res = await request(API.coinTransfer, {
				bak: bak.value,
				amount:num.value,
				toUserPhone:phone.value
			}, 'POST')
			if (res.code == 40001) {
				uni.navigateTo({
					url: 'login'
				})
			} else if (res.code == 200) {
				uni.showToast({
					title: '操作成功，等待好友确认',
					duration: 2000,
					icon: 'none'
				})
				num.value = ''
				phone.value = ''
				bak.value=''
			} else if (res.data) {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.container {
		padding: 20rpx;

		.title {
			text-align: center;
			font-size: 38rpx;
			font-weight: 600;
		}

		.addressBack-box {
			background-color: #FFFFFF;
			padding: 30upx 30upx;
			display: grid;
			margin-top: 30rpx;
			grid-template-columns: 168rpx auto;

			.lable {
				font-size: 28rpx;
				vertical-align: middle;
				text-align: left;
				padding-bottom: 36upx;
				margin-top: 20upx;
			}

			.input-box {
				padding-bottom: 36upx;
				width: 690upx;
				margin-top: 20upx;

				.consignee {
					color: #999999;
					font-size: 28upx;
				}
			}
		}

		.apply-withdraw {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			border-radius: 48rpx;
			color: #FFF;
			text-align: center;
			background: #F3641E;
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}

	.content {
		font-size: 35rpx;
		width: 500rpx;

		.btn {
			margin-bottom: 20rpx;
			width: 200rpx;
			background-image: linear-gradient(135deg, #FFA100 10%, #FF7911 100%);
		}
	}
</style>